<template>
  <div>
    <button @click="openVueModal">打开组件弹窗</button>
    <button @click="openModal">打开普通弹窗</button>
    <button @click="showAlert">打开Alert弹窗</button>
    <button @click="showConfirm">打开Confirm弹窗</button>

    <!-- 使用组件方式 -->
    <Modal v-model="visible" title="组件式弹窗">
      <p>这是一个使用组件方式打开的弹窗</p>
      <template #footer>
        <button @click="visible = false">关闭</button>
      </template>
    </Modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, inject } from "vue";
import Modal from "@components/Modal.vue";
import { useRouter } from "vue-router";

// 使用组件方式
const visible = ref(false);

// 使用服务方式
const modal = inject("modal");
const router = useRouter();

function openVueModal() {
  visible.value = true;
}

function openModal() {
  modal({
    title: "自定义弹窗",
    content: "这是一个通过服务方式打开的弹窗",
    width: 600,
    onConfirm: () => {
      console.log("点击了确定");
    },
    onCancel: () => {
      console.log("点击了取消");
    },
  });
}

function showAlert() {
  modal.alert("这是一个提示框", "提示", () => {
    console.log("alert确认");
  });
}

function showConfirm() {
  modal.confirm(
    "确定要执行此操作吗？",
    "确认操作",
    () => {
      console.log("confirm确认");
    },
    () => {
      console.log("confirm取消");
    }
  );
}
</script>

<style scoped lang="scss">
/* 样式可以根据需要添加 */
</style>
